<template>
  <div class='goldenEggs'>
    <img :src="goldenEggsInfo.appCoverPictureUrl" alt="">
    <!-- <img src="../../assets/img/bj.jpg" alt=""> -->
    <!-- 砸金蛋 -->
    <div class='eggs_content'>
      <span class='egg_block1' @click='changeEgg'></span>
      <span class='egg_block2' @click='changeEgg'> <img v-if="showHammer" class='hammer' src="@/assets/img/0.png" /></span>
      <span class='egg_block3' @click='changeEgg'></span>
    </div>
    <div class='content'>
      <div class='count_content'>今天剩余<span class='num'>{{count}}</span><span class='one'>次</span>砸金蛋机会</div>
      <div class='time_content' v-if="nowTime"><img src='@/assets/img/daojishibj.png' />
        <div class='time_block'><span class='title'>距活动结束:</span>
          <span class='time'>{{hours}}</span>时<span class='time'>{{minutes}}</span>分<span class='time'>{{seconds}}</span>秒
        </div>
        <!-- //查看我的奖品按钮 -->
        <img class='jp_block' src='@/assets/img/jp.png' @click='showPrize' />
      </div>
      <!-- //活动规则 -->
      <div class='gz_content'>
        <div class='top'><img src="@/assets/img/app_hdgz.jpg" alt=""></div>
        <div class='center' v-if="goldenEggsInfo">
          <div class='row' v-for="(item,index ) of goldenEggsInfo.description" :key="index">{{item}}</div>
        </div>
        <div class='bottom'><img src="@/assets/img/app_hdgz_d.jpg" alt=""></div>
      </div>
      <!-- 中奖名单 -->
      <div class='activity_content'>
        <div class='peopel_content'>
          <div class='title'>
            <div class='title_text'>会员名</div>
            <div class='title_text'>奖项</div>
          </div>
          <SwiperScroll style="height:5.4rem" ref="swiperScroll" :sliderNum="6" :datasource="prizeList" :autoPlay="true" :autoPlayTime="1000" :speed="1000">
            <template slot-scope="{item}">
              <div class='scroll_item'>
                <span class='title_left'>{{item.userName}}</span><span class='title_right'>{{item.prizeName}}</span>
              </div>
            </template>
          </SwiperScroll>
        </div>

      </div>
    </div>
    <!-- 弹窗位置 -->
    <EggLoading ref="eggLoading" /> <!-- 敲蛋动画 -->
    <RewardsDialog ref="rewardsDialog" @close='closeRewardsDialog' /> <!-- 奖励弹窗 -->
    <PrizeDialog ref="prizeDialog" /> <!-- 查看我的奖品弹窗 -->
  </div>
</template>

<script>
//引入保存所有接口的url文件
import url from '@/axios/apiUrl'
import { getRequest } from '@/api/indexGet'
import SwiperScroll from '@/components/SwiperScroll'
import EggLoading from './components/EggLoading'
import RewardsDialog from './components/RewardsDialog'
import PrizeDialog from './components/PrizeDialog'

export default {
  components: {
    SwiperScroll,
    EggLoading,
    RewardsDialog,
    PrizeDialog,
  },
  data() {
    return {
      showHammer: true,
      count: null,
      prizeList: [], //中奖名单列表
      rewardData: {},
      nowTime: '',
      endTime: '',
      hours: '',
      minutes: '',
      seconds: '',
      swiperData: [],
      goldenEggsInfo: {}, //信息返回集合
      luckyDrawId: '', //抽奖id
    }
  },
  mounted() {
    //抽奖活动信息
    this.luckyDrawInfo()
  },
  methods: {
    //金蛋炸到了关闭弹窗并且锤子出现
    closeRewardsDialog() {
      this.showHammer = true
    },
    //抽奖活动信息
    async luckyDrawInfo() {
      // 1大转盘  2炸金蛋  3盲盒
      let res = await getRequest(url.luckyDrawInfo + '/2')
      if (res.data.code == '000000') {
        this.goldenEggsInfo = res.data.content
        this.luckyDrawId = this.goldenEggsInfo.luckyDrawId //抽奖id
        this.count = this.goldenEggsInfo.times //抽奖次数
      var isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
      if (isIos) {
         this.nowTime = new Date(this.goldenEggsInfo.dateTime.replaceAll('-', '/') ).getTime()
          this.endTime = new Date(this.goldenEggsInfo.endTime.replaceAll('-', '/') ).getTime()
      } else {
         this.nowTime = new Date(this.goldenEggsInfo.dateTime).getTime()
          this.endTime = new Date(this.goldenEggsInfo.endTime).getTime()
      } 
        this.countDownInit()
        this.getNowTime()
        this.prizeList = this.goldenEggsInfo.luckyWinners //中奖名单

        this.$nextTick(() => {
          this.$refs.swiperScroll.refresh()
        })
      } else if (res.data.message == '系统异常') {
        this.$toast('网络异常，请稍后再试')
      } else if (res.data.code != '000000') {
        this.$toast(res.data.message)
      }
    },
    // 获取当前时间
    countDownInit() {
      var curTime = setInterval(() => {
        this.nowTime = this.nowTime + 1000
      }, 1000)
    },
    //查看我的奖品
    async showPrize() {
      let res = await getRequest(url.getPrize + '/' + this.luckyDrawId)
      if (res.data.code == '000000') {
        this.swiperData = res.data.content
        this.$refs['prizeDialog'].show(this.swiperData)
      } else if (res.data.message == '系统异常') {
        this.$toast('网络异常，请稍后再试')
      } else if (res.data.code != '000000') {
        this.$toast(res.data.message)
      }
    },
    //选择金蛋
    async changeEgg() {
      this.showHammer = false
      if (this.count <= 0) {
        this.$toast('今日已经没有可用次数了~')
        this.showHammer = true
        return
      }
      let res = await getRequest(url.hitGoldenEggs + '/' + this.luckyDrawId)
      if (res.data.code == '000000') {
        this.$refs['eggLoading'].show()
        this.rewardData = res.data.content
        setTimeout(() => {
          this.$refs['eggLoading'].close()
          const rewards = this.rewardData
          this.$refs['rewardsDialog'].show(rewards)
          this.count--
          // this.submitTimes()
        }, 2300)
      } else if (res.data.message == '系统异常') {
        this.$toast('网络异常，请稍后再试')
      } else if (res.data.code != '000000') {
        this.count--
        this.$toast(res.data.message)
        this.showHammer = true
      }
    },
    getNowTime() {
      this.timer = setInterval(() => {
        if (this.nowTime < this.endTime) {
          //进行中
          this.hours = Math.floor(
            ((this.endTime - this.nowTime) / 1000 / 60 / 60)
          )
          // 判断小时是否大于24小时
          if (this.endTime - this.nowTime > 86400000) {
            this.days = parseInt((this.endTime - this.nowTime) / 86400000)
          }
          this.minutes = Math.floor(
            ((this.endTime - this.nowTime) / 1000 / 60) % 60
          )
          this.seconds = Math.floor(((this.endTime - this.nowTime) / 1000) % 60)
          if (this.hours < 10) {
            this.hours = '0' + this.hours
          }
          if (this.minutes < 10) {
            this.minutes = '0' + this.minutes
          }
          if (this.seconds < 10) {
            this.seconds = '0' + this.seconds
          }
        } else if (this.nowTime > this.endTime) {
          // 已结束
          this.hours = '00'
          this.minutes = '00'
          this.seconds = '00'
        }
      }, 500)
    },
  },
}
</script>
<style lang="less" scoped src='./index.less'>
</style>